<template>
	<div>
		<!--导航栏-->
		<div class="nav">
			<a class="moren" href="#/ChunCai">默认</a>
			<a class="jiaxian" href="#/JiaGe">价格 <img class="shunxu" src="../assets/img/shouye/sousuo/6jia.png" alt=""/></a>
			<a href="###">销量</a>
			<a href="###">筛选</a>
		</div>
		<!--价格高低-->
		<div class="jiagd">
			<a href="#/JiaGeG">价格由高到低</a>
			<a class="daodi" href="#/JiaGeD">价格由低到高</a>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'ShangpinDaohang',
		methods: {
			round: function() {
				$(".nav>a").click(function() {
					$(this).addClass("moren").siblings('a').removeClass("moren");
				});
				//价格选项出现
				var flag = false;
				$(".jiaxian").click(function() {
					if(flag == false) {
						$(".jiagd").css("display", "none");
						flag = true;
					} else if(flag == true) {
						$(".jiagd").css("display", "block");
						flag = false;
					}
				});
			},
		},
		mounted: function() {
			//只有在mounted之后，才可以执行dom操作，也就是说可以在这个方法里面执行那些需要加载立即执行的方法
			this.round();
		}
	}
</script>

<style>
	/*导航栏*/
	
	.nav {
		color: #4d4d4d;
		width: 100%;
		height: 8rem;
		line-height: 8rem;
		font-size: 2.8rem;
		margin-top: 9.6rem;
		display: flex;
		justify-content: space-around;
		border-bottom: 0.01rem solid #cccccc;
		background: #FFFFFF;
	}
	/*价格*/
	
	.jiagd {
		width: 100%;
		position: absolute;
		top: 17rem;
		left: 0;
		background: whitesmoke;
		display: none;
	}
	
	.jiagd>a {
		display: block;
		width: 100%;
		height: 11rem;
		line-height: 11rem;
		border-bottom: 0.01rem solid #808080;
		font-size: 2.8rem;
		padding-left: 2rem;
		box-sizing: border-box;
	}
	
	.daodi{
		border-bottom: none;
	}
	
	.moren {
		color: red;
	}
	
	.shunxu {
		width: 1rem;
		height: 2rem;
	}
</style>